import { FC, Suspense } from 'react';
import { ConfigProvider, Spin } from 'antd';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import zhCN from 'antd/locale/zh_CN';
import { store, persistor } from './store';
import { routes } from './routes';
import './App.css';

// 只在开发环境使用 mock
if (process.env.NODE_ENV === 'development') {
  // require('./mock/user');
  require('./mock/trend-analysis');
  // require('./mock/phase-summary');
  // require('./mock/report');
  // require('./mock/chat');
  // require('./mock/industry-report');
  require('./mock/graph-builder');
  // require('./mock/tech-insight');
}

const App: FC = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ConfigProvider
          locale={zhCN}
          theme={{
            token: {
              colorPrimary: '#1890ff',
              colorBgContainer: '#f0f5ff',
              borderRadius: 8,
            },
          }}
        >
          <BrowserRouter>
            <Suspense fallback={<Spin size="large" className="global-spin" />}>
              <Routes>
                {routes.map((route) => (
                  <Route
                    key={route.path}
                    path={route.path}
                    element={route.element}
                  />
                ))}
                <Route path="*" element={<Navigate to="/" replace />} />
              </Routes>
            </Suspense>
          </BrowserRouter>
        </ConfigProvider>
      </PersistGate>
    </Provider>
  );
};

export default App;
